---
title: React Pagination - Flowbite
description: Get started with the pagination component to indicate the number of pages with number, link, and control buttons and allow the user to navigate through these pages
---

The pagination component can be used to show a list of pages with numbers and links to allow the users to navigate through multiple pages, data from tables, and more.

Choose one of the examples below based on various styles and sizes and customize them using the React props API and the utility classes from Tailwind CSS.

You need to import the pagination component from the `flowbite-react` library before using it:

```jsx
import { Pagination } from "flowbite-react";
```

## Default pagination

Use the `<Pagination>` component to create a default pagination element and use the `currentPage` prop to set the currently active page, the `totalPages` prop to set how many pages there are in total and update the `onPageChange` even listener to set the state of the pagination component via React.

<Example name="pagination.root" />

## Pagination with icons

Add next and previous icons to the pagination component by passing the `showIcons` prop via React.

<Example name="pagination.withIcons" />

## Previous and next

Show only the next and previous control buttons by passing the `layout="navigation"` prop from React.

<Example name="pagination.navigation" />

## Control button icons

Show the control buttons with icons by passing both the `layout="navigation"` and `showIcons` props.

<Example name="pagination.navigationWithIcons" />

## Table data navigation

Use this example show table data navigation by using the `layout="table"` prop from React.

<Example name="pagination.table" />

## Table data navigation with icons

Show icons for the next and previous control buttons for table navigation by passing the `showIcons` prop.

<Example name="pagination.tableWithIcons" />

## Control button text

Customize the text for the next and previous buttons by passing the `previousLabel` and `nextLabel` props.

<Example name="pagination.controlButtonText" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="pagination" />

## References

- [Flowbite Pagination](https://flowbite.com/docs/components/pagination/)
